<template>
  <div style="padding: 10px; display: flex; flex-direction: column ; align-items: flex-start" >
<!--    搜索区-->
    <div style="margin: 10px 0" >
      <el-select v-model="selectedProjectId" placeholder="请选择项目" clearable style="width: 200px; margin-right: 10px">
        <el-option
          v-for="project in dataProject"
          :key="project.id"
          :label="project.descr"
          :value="project.id">
        </el-option>
      </el-select>
      <el-input v-model="searchWord" placeholder="请输入关键字" style="width: 200px" clearable ></el-input>
      <el-button type="primary"  style="margin-left: 5px" @click="searchCtlCmd(searchWord)">搜索</el-button>
      <el-button type="primary"  style="margin-left: 5px" @click="addCtlCmd()">增加</el-button>
      
    </div>

                  
    <el-table :data="dataCtlCmd" border  
              :cell-style="{borderColor:'#C0C0C0', fontWeight: '500', fontSize: '14px' }"
              :header-cell-style="{background: '#89D8D1',  color: '#333', fontWeight: '600', fontSize: '14px', }"
              :height="tableHeight"
              @row-click="handleRowClick"
              :row-class-name="tableRowClassName"
    >
    <el-table-column prop="projectname" label="项目名称" sortable  width="150"/>
      <el-table-column prop="ctlid" label="编号" sortable  width="50"/>
      <el-table-column prop="descr" label="描述" width="150" />
      <el-table-column prop="ctlkey" label="开出位置" width="100"/>
      <el-table-column prop="ctlstr" label="开出串" width="300" />
      <el-table-column prop="memo" label="备注" width="100" />

      <el-table-column label="操作"  min-width="30%" >
        <template #default="scope">
          <el-button type="danger" @click="handleUpdate( scope.$index, scope.row)" >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <DlgPropCtlCmd :dialog-visible="showDialog"  :form-data="formData" @resPropCtlCmd="resCtlCmd"  ></DlgPropCtlCmd>  
  </div>
  
</template>

<script>
import { mapState } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/drawutils/request';
import DlgPropCtlCmd from './DlgPropCtlCmd.vue';

export default {
  name: 'ComptCtlCmd',

  components: {  DlgPropCtlCmd  },

  data(){
    return {
      dataCtlCmd: [],
      searchWord: "",
      selectedProjectId: "",  // 添加这一行
      tableHeight:"400",
      showDialog: false, 
      formData: {},
      updateIndex: -1,
      ctlid:  -1,
      dataProject: [],
    }
  },

  computed: {
        ...mapState(['project_id']),
  },  

  async mounted() {
    // console.log( "project_id: " , this.project_id )
    await this.getProjectList()
    await this.searchCtlCmd( "" )
    this.calculateTableHeight(  );
    window.addEventListener('resize', this.calculateTableHeight );
  },

  unmounted() {
    window.removeEventListener('resize', this.calculateTableHeight );
  },

  unmounted() {

  },

  methods:{
    searchCtlCmd( keyword ){
      // console.log( "search: ", keyword )
      let url = "/ctlcmd/getbykeyword"
      // 修改这一行，添加项目过滤参数
      let parm = { 
        filter_project_id: this.selectedProjectId,  // 添加这一行
        keyword: keyword 
      }
      request.post( url, parm ).then( res=>{
        if( res.code === "1" ){
          // console.log( res.data )
          this.dataCtlCmd = res.data
          this.dataCtlCmd.forEach( item=>{
            item.projectname = this.dataProject.find( p=>p.id == item.projectId )?.descr || ''
          })
        }
      })
    },

    addCtlCmd( ){
      this.formData = {  projectId: this.project_id,  descr: "描述" }
      this.showDialog = true

    },

    resCtlCmd( code , parm  ){
      this.showDialog = false 

      if( code == 1 ){
        if( parm.hasOwnProperty("id") ){
          let url = "/ctlcmd/update"
          request.post( url, parm ).then( res=>{
            // console.log( "res", res )
            if( res.code === "1" ){
              this.dataCtlCmd.splice( this.updateIndex, 1, parm )
              console.log( this.dataCtlCmd )
            }
          })
        }
        else{
          let url = "/ctlcmd/add"
          request.post( url, parm ).then( res=>{
            // console.log( "res", res )
            if( res.code === "1" ){
              this.dataCtlCmd = res.data
              this.dataCtlCmd.forEach( item=>{
                item.projectname = this.dataProject.find( p=>p.id == item.projectId ).descr
              })
            }
          })
        }
      } //  end if  code == 1
    },

    calculateTableHeight() {
      const windowHeight = window.innerHeight;
      this.tableHeight = `${windowHeight - 400 }px`;
    },

    handleUpdate( index,  row  ){
        this.updateIndex = index
        this.formData = JSON.parse(  JSON.stringify(row)  )
        this.ctlid = row.ctlid // 将ctlid存储在ctlid变量中
        this.showDialog = true
    },

    handleRowClick(row, column, event) {
        this.ctlid = row.ctlid // 点击行时将ctlid存储在ctlid变量中
        this.formData = JSON.parse(  JSON.stringify(row)  )
    },

    tableRowClassName({ row, rowIndex }) {
        if (row.ctlid === this.ctlid) {
            return 'selected-row'
        }
        return ''
    },
    getCtlId(){
      return this.ctlid
    },

    async  getProjectList(  ){
      let url = "/drwproject/getallprojects"
      request.post( url, {} ).then( res=>{
        if( res.code === "1" ){
          // console.log( res.data )
          this.dataProject = res.data
          // console.log(  "project: ",  this.dataProject )
        }
      })
    },

  },

}
</script>

<style scoped>
::v-deep(.el-table .selected-row) {
    background-color: #5cea0f !important;
}

::v-deep(.el-table .selected-row td) {
    background-color: #5cea0f !important;
    border-color: #C0C0C0 !important;
}

/* ::v-deep(.el-table .selected-row:hover > td) {
    background-color: #5cea0f !important;
    border-color: #C0C0C0 !important;
} */
</style>
